<template>
	<!-- pages/publishGoods/publishGoods.wxml -->
	<view class="publishGoods">
		<view class="publishGoods_form">
			<view class="form_item">
				<text class="item_lab">规格名称</text>
				<input class="item_input" v-model="form.name" placeholder-style="color: #8B8B8B;" placeholder="颜色型号不同写在名称里"
					type="text">
				<image class="item_icon" src="/static/pages/image/area_right.png"></image>
			</view>
			<view class="form_item">
				<text class="item_lab">出售价格</text>
				<input class="item_input" v-model="form.param_price" placeholder-style="color: #8B8B8B;" placeholder="请输入出售价格"
					type="text">
				<image class="item_icon" src="/static/pages/image/area_right.png"></image>
			</view>

		</view>
		<view class="form_upImg">
			<view class="upImg_show upImg_particulars">
				<view class="upImg_title">
					<text class="title_txt">添加展示图片</text>
				</view>
				<view class="upImg_content">
					<view v-if="form.param_image" class="upImg_item" :style="'background-image: url('+form.param_image+'); background-size: 100% 100%;'"  @tap="upImage">
						<image class="item_icon" src="/static/pages/image/tupiangb_btn.png" ></image>
						<view class="item_bottom">
							<text class="item_txt">重新上传</text>
						</view>
					</view>
					<view v-else class="upImg_item upImg" @tap="upImage" data-type="2">
						<image src="/static/pages/image/upImg.png" class="upImg_img"></image>
						<view class="item_bottom">
							<text class="item_txt">点击上传</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="footer_btn">
			<button class="btn" @tap="onSubmit">{{id ? '确认修改' : '确认上传' }}</button>
		</view>
	</view>
</template>

<script>
	// pages/publishGoods/publishGoods.js
	var app = getApp();

	export default {
		data() {
			return {
				form: {
					name:null,
					param_price:null,
					param_image:null
				},
				id:null
			};
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onLoad: function(option) {
			this.id = option.id
			if(option.id){
				this.getDetails()
			}
			// let parm = uni.getStorageSync('parm')
			// if (parm) this.parm = JSON.parse(parm)
			// console.log(this.parm)
		},

		methods: {
			getDetails(){
				uni.showLoading({title: '加载中'});
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: {
						m: "monai_market",
						r: "goods.index.new_getParam_details",
						uid: uni.getStorageSync('uid'),
						param_id:this.id
					},
					success: res => {
						this.form = Object.assign(this.form,res.data.data)
						uni.hideLoading();
					},
					fail: res => {
						this.showToast(res.data.message);
						uni.hideLoading();
					}
				});	
			},
			showToast(title) {
				wx.showToast({
					title: title,
					duration: 2000,
					icon: 'none'
				});
			},

			onSubmit() {
				if (!this.form.name) return this.showToast('请输入规格名称');
				if (!this.form.param_price) return this.showToast('请输入出售价格');
				if (!this.form.param_image) return this.showToast('请上传图片');
				let data = {
					m: "monai_market",
					uid: uni.getStorageSync('uid'),
				};
				data.r = this.id ? 'goods.index.new_upParam' : 'goods.index.new_setParam'
				data = Object.assign(data,this.form)
				uni.showLoading({
					title: '加载中'
				});
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data: data,
					success: res => {
						this.showToast('操作成功');
						setTimeout(() => {
							wx.navigateBack();
						}, 1000);
						uni.hideLoading();
					},
					fail: res => {
						this.showToast(res.data.message);
						uni.hideLoading();
					}
				});
			},
		
			
			getImages(imgs) {
				return imgs.map(item => item.img);
			},

			upImage(event) {
				let index = event.currentTarget.dataset['index'];
				app.globalData.upimgs({
					scannums: 1,
					filename: "cars",
					success: a => {
						a.forEach(item=>{
							this.form.param_image = item.all
						})
					}
				});
			},

		}
	};
</script>

<style lang="scss" scoped>
	/* pages/publishGoods/publishGoods.wxss */

	.publishGoods_form {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.publishGoods_form .form_item {
		display: flex;
		align-items: center;
		padding: 35rpx 0;
		box-sizing: border-box;
		justify-content: space-between;
		border-top: 2rpx solid #F4F6F8;
	}

	.form_item .item_lab {
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		margin-right: 89rpx;
	}

	.form_item .item_input {
		flex: 1;
		padding-right: 10rpx;
		font-size: 30rpx;
		font-weight: 500;
	}

	.form_item .item_icon {
		width: 15rpx;
		height: 25rpx;
	}


	/* 上传 */
	.form_upImg .upImg_show {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.upImg_show .upImg_title {
		margin-bottom: 23rpx;
	}

	.upImg_show .upImg_title .title_txt {
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}

	.upImg_show .upImg_title .title_tips {
		font-size: 24rpx;
		font-weight: 500;
		color: #9B9B9B;
	}

	.upImg_show .upImg_content {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-row-gap: 34rpx;
		grid-column-gap: 34rpx;
	}

	.upImg_content .upImg_item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 7px;
		height: 199rpx;
	}

	.upImg_item .item_icon {
		position: absolute;
		right: 0;
		top: 0;
		width: 29rpx;
		height: 25rpx;
	}

	.upImg_item .item_bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		background: #000000;
		opacity: 0.5;
		border-radius: 0px 0px 10rpx 10rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.upImg_content .upImg {}

	.upImg .upImg_img {
		width: 79rpx;
		height: 76rpx;
		margin-top: -34rpx;
	}

	.upImg .item_bottom {
		background: #03BA80;
		border-radius: 0px 0px 10px 10px;
	}

	.upImg_particulars {
		margin-top: 46rpx;
	}

	.footer_btn {
		margin-top: 30upx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.footer_btn .btn {
		height: 114rpx;
		background: linear-gradient(-87deg, #0CD8C2, #0BC2AE);
		border-radius: 57rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 114rpx;
	}
</style>
